<template>
  <!-- 右侧窗口可视化收藏部分 -->
  <div class="visual-favorite">
    <Visualization
      v-for="(widget, index) in widgetList"
      :key="index"
      :widget="widget"
      current-type="favorite"
    />
    <div
      v-show="widgetList.length === 0"
      :style="{ textAlign: 'center', marginTop: '237px' }"
    >
      <img :src="publicPath + '/img/empty.svg'" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import DataViewStore from '@/store/modules/dataview'
import Visualization from '@/components/studio/data/drawer/Visualization.vue'
import { Prop, Watch } from 'vue-property-decorator'
import {
  queryFavorites,
  widgetQueryById,
  getWidgetData,
} from '@/api/right-drawer'
import { dealData } from '@/components/studio/data/util'
import { removeNullEntries } from '@/util/recommend-visualization'
import { publicPath } from '@/api/constants'

@Component({
  components: { Visualization },
})
export default class VisualFavorite extends Vue {
  private chart_type: string = 'barChart'
  private config: any = {}
  private active: boolean = false
  private publicPath = publicPath

  @Prop({
    type: String,
    default: '',
  })
  drawerType!: string

  @Watch('favoriteStatus')
  public refreshFavoriteList() {
    console.log('refresh')
    this.getWidgetList()
  }

  public get pipelineId() {
    return DataViewStore.getPipelineId
  }

  public get currentData(): any {
    return DataViewStore.getCurrentData
  }

  public get favoriteStatus(): boolean {
    return DataViewStore.getFavoriteStatus
  }

  public created() {
    console.log('11111111')
    this.getWidgetList()
  }

  public mounted() {
    console.log('22222222')
  }

  private widgetList: any = []
  private currentConfig = {}

  // 获取可视化列表，查询每个可视化的具体配置
  public async getWidgetList() {
    this.widgetList = []
    console.log('***', this.currentData())
    const postData = {
      pipelineId: this.pipelineId,
    }
    const response = await queryFavorites({ data: postData })
    // const postData = {
    //   pageSize: 10,
    //   taskId: this.selectNode.id,
    //   pipelineId: this.pipelineId,
    //   projectId: localStorage.getItem('projectId'),
    // }
    // const response = await getGlobalWidgets({data: postData})
    response.data.result.forEach((element: any) => {
      const postData2 = {
        id: element.widgetId,
        type: 'task',
      }
      widgetQueryById({ data: postData2 }).then((result) => {
        const postData3 = {
          id: result.data.result.data.formData.dataId,
          type: result.data.result.data.formData.datType,
          widgetJson: result.data.result.data.widgetJson,
        }
        getWidgetData({ data: postData3 }).then((result2) => {
          if (result2.data.code === 100) {
            const nowConfig = result.data.result.data.chartOptions
            let nowChartType = 'barChart'
            if (result.data.result.data.chartType.length > 1) {
              ;[nowChartType] = result.data.result.data.chartType
            } else {
              nowChartType = result.data.result.data.chartType
            }
            const nowData = dealData(
              result2.data.result,
              nowChartType,
              result.data.result.data
            )
            // TODO: temp: remove null entries to avoid rendering error
            nowConfig.value = removeNullEntries(<any[]>nowData)
            nowConfig.size = [314, 140]
            const widget = {
              name: result.data.result.name,
              chartType: nowChartType,
              config: nowConfig,
              widgetId: result.data.result.id,
            }
            this.widgetList.push(widget)
          }
        })
      })
    })
  }
}
</script>

<style lang="less" scoped>
.visual-favorite {
  height: calc(100vh - 142px);
  overflow-y: scroll;
}
</style>
